<template>
  <q-page class="q-pa-md">
    <div>
      <titleList :titleListData="[$t('generalManage'),$t('userAdministration')]" />
      <el-row :gutter="20">
        <el-col :span="8">
          <div style="border: 1px solid rgb(187,187,187);height: 500px;padding: 10px">
            <div style="display: flex; margin-bottom: 10px">
              <el-input style="width: 200px" v-model="filterText" clearable></el-input>
              <el-button type="primary" @click="isExpandAllHandle" style="margin-left: 20px"> {{ expandText }} </el-button>
            </div>
            <el-tree
              ref="treeRef"
              :data="dataSource"
              :props="defaultProps"
              show-checkbox node-key="id"
              :default-expand-all="isExpandAll"
              :default-checked-keys="defaultCheckedKeys"
              :filter-node-method="filterNode"
            >
              <template #default="{ data }">
                <div class="row">
                  <div class="col col-3">{{ data.name }}</div>
                </div>
              </template>
            </el-tree>
          </div>
        </el-col>
      </el-row>
    </div>
  </q-page>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n({ useScope: 'global' });
import titleList from 'components/subTitleList.vue';
import { getMenuList } from 'src/api/system';
import { ref, watch, toRaw  } from "vue";
import { ElTree } from 'element-plus'

let defaultCheckedKeys = ref([]);
const dataSource = ref([
  {
    id: 1,
    label: '显示文件夹名称',
    date: '2023-04-18 22:33:11',
    size: '12k',
    children: [
      {
        id: 4,
        label: '显示文件名称',
        date: '2023-04-18 22:33:11',
        size: '12k',
      },
      {
        id: 5,
        label: '显示文件名称',
        date: '2023-04-18 22:33:11',
        size: '12k',
      },
    ],
  },
  {
    id: 2,
    label: '项目文件夹',
    date: '2023-04-18 22:33:11',
    size: '12k',
    children: [
      {
        id: 7,
        label: '1.xtx',
        date: '2023-04-18 22:33:11',
        size: '12k',
      },
      {
        id: 8,
        label: '233.txt',
        date: '2023-04-18 22:33:11',
        size: '12k',
      },
    ],
  }
])
const isExpandAll = ref(true)
let expandText = ref(t('expandAll'))
let treeData = ref([]);
//js数组对象转换成树
function transTree(data:any) {
  let result:any = []
  let mapObject = {} as any;
  if (!Array.isArray(data)) {
    return []
  }
  data.forEach( (item:any) => {
    mapObject[item.id] = item
  })
  data.forEach( (item:any) => {
    let parent = mapObject[item.parent_menu]
    if (parent) {
      (parent.children || (parent.children = [])).push(item)
    } else {
      result.push(item)
    }
  })
  return result
}

//获取系统菜单列表
getSystemMenuList();
function getSystemMenuList () {
  getMenuList().then( (res:any) => {
    res.data.results.forEach( (items:any) => {
      if( items.is_require ){
        items.disabled = true
        items.expanded = true
      }
    })
    treeData.value = res.data.results
    dataSource.value = transTree(res.data.results);
  }).catch( (error:any) => {
    console.log('error', error);
  })
}

// tree
interface Tree {
  [key: string]: any
}
let filterText = ref('')
let treeRef = ref()

const defaultProps = {
  children: 'children',
  label: 'name',
}

watch(filterText, (val) => {
  treeRef.value?.filter(val)
})
let data = defaultCheckedKeys.value;
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.name.includes(value)
}

//张开/收缩
const isExpandAllHandle = () => {
  if( isExpandAll.value ){
    isExpandAll.value = false;
    expandText.value = t('expandAll');
    let nodes = treeRef.value.store.nodesMap
    for (let i in nodes) {
      nodes[i].expanded = isExpandAll.value
    }
  } else {
    isExpandAll.value = true;
    expandText.value = t('shrinkAll');
    let nodes = treeRef.value.store.nodesMap
    for (let i in nodes) {
      nodes[i].expanded = isExpandAll.value
    }
  }
}
// return { treeRef }
</script>
<style scoped lang="scss"></style>
